<template>
  <div class="main">
    <div class="aside">
      <el-avatar
        :src="circleUrl"
        @click.native="dialogVisible = true"
      ></el-avatar>
      <span class="name">{{ username }}</span>
      <hr />
      <h4>基本设置</h4>
      <ul>
        <li><router-link to="/user/info/changeInfo">个人资料</router-link></li>
        <li><router-link to="">我的歌单</router-link></li>
      </ul>
      <h4>安全设置</h4>
      <ul>
        <li><router-link to="changePass">修改密码</router-link></li>
      </ul>
    </div>
    <div class="info">
      <router-view></router-view>
    </div>
    <!-- ------musk内容------ -->
    <el-dialog title="修改头像" :visible.sync="dialogVisible" width="25%">
      <span>
        <form id="upAvatarForm">
          <input name="Id" type="hidden" :value="Id" />
          <input type="file" @change="getFile($event)" />
          <!-- <button @click="submitForm($event)">提交</button> -->
        </form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm($event)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Qs from "qs";

export default {
  data() {
    return {
      username: Qs.parse(window.localStorage.getItem('user')).usercode,
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      dialogVisible: false,
      Id: Number(window.localStorage.getItem("uid")),
      file: null,
    };
  },
  methods: {
    getFile(event) {
      this.file = event.target.files[0];
    },
    submitForm(event) {
      event.preventDefault();
      let formData = new FormData();
      formData.append("Id", this.Id);
      formData.append("file", this.file);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
          token: window.localStorage.getItem("token"),
          uid: window.localStorage.getItem("uid"),
        },
      };

      this.$axios
        .post("/api/user/upAvatar", formData, config)
        .then((resp) => {
          if (resp.data.code === 200) {
            window.localStorage.setItem('avatar',resp.data.data);
            this.$bus.$emit("updateAvatar");//更新头像显示
            this.updateAvatar();
            this.$notify({
              title: "上传成功",
              message: resp.data.message,
              type: "success",
            });
          } else {
            this.$notify({
              title: "权限不足",
              message: resp.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          this.$notify({
            title: "请检查网络",
            message: error,
            type: "error",
          });
        });
      this.dialogVisible = false;
    },
    updateAvatar() {
      let avatar = window.localStorage.getItem("avatar");
      if (
        avatar != null &&
        avatar != "default_avatar.png"
      ) {
        this.circleUrl = avatar;
      }
    },
  },
  mounted() {
    this.updateAvatar();
  },
};
</script>

<style scoped>
.main {
  display: block;
  /* position: absolute; */
}
.info {
  position: absolute;
  width: 600px;
  top: 50px;
  left: 300px;
}
.aside {
  display: block;
  float: left;
  margin-left: 50px;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 0 20px;
  background: #cdf5a7;
  width: 240px;
  height: 550px;
  overflow-y: auto;
}
.el-avatar {
  display: block;
  margin: 20px auto 0;
  width: 70px;
  height: 70px;
}
.name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  display: block;
  margin: 15px 0;
}
.aside h4 {
  margin: 25px 0;
  font-size: 20px;
  color: #005090;
}
.aside ul {
  padding: 0;
  margin: 0;
}
.aside li {
  margin: 17px 0;
  list-style-type: none;
  font-weight: 700;
}
.aside li *:hover {
  color: red;
}
</style>